import React, {PureComponent} from "react";
import {
    Platform,
    StyleSheet,
    ART,
    Text,
    View,
    ScrollView,
    Image,
    Dimensions,
    TouchableOpacity,
    Button,
    DeviceEventEmitter,
    NativeModules,
    NativeEventEmitter,
} from "react-native";
import color from "../../../widget/color";
import MineIAPTabBar from '../../../widget/mine/MineIAPTabBar'
import Tips from 'react-native-root-tips'

const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;

const {width, height} = Dimensions.get('window')

var IAP = NativeModules.IAPNative;
const NativeModule = new NativeEventEmitter(IAP);

type Props = {
    navigation:any,
}


export default class IapScene extends PureComponent<Props> {


    static navigationOptions = ({navigation}: any) => ({
        headerTintColor:'white',
        headerStyle:{
            backgroundColor:color.globalMainColor
        },
        title:'我的余额',
        headerRight:<Text/>,
    });

    constructor(props) {
        super(props)
        this.state = {
            top_index:0,
            tabs:['1币','6币','50币'],
            iaps:['jk1','jk6','jk50'],
        }

    }

    componentWillUnmount() {
        //删除监听
        this.subscription.remove()
    }

    _getNotice(body) {//body 看你传什么
        //一系列操作
        // this.setState({address: body['address'], address_id: body['addressId']});
        Tips.hide()
        if (body['code'] == '200') {
            Tips.showSuccess(body['msg'], {mask: true})
        } else {
            Tips.showFail(body['msg'], {mask: true})

        }
        // this.setState({address: body['address'], address_id: body['addressId']});
    }

   goToIap(){
       if (Platform.OS === 'ios'){
           let idifi = this.state.iaps[this.state.top_index]
           IAP.RNOpenIAP(idifi)
       }
   }
    componentDidMount() {


        this.subscription = NativeModule.addListener('IAPNot', (data) => this._getNotice(data));




    }





    render() {

        return (
                <View style={styles.container}>
                    <View style={{backgroundColor:'white',}}>
                        <View style={{width:(width-24),height:69,marginLeft:12,justifyContent:'center',alignItems:'center',backgroundColor:'#F5F5F5',borderRadius:3,flexDirection:'row',marginTop:16}}>
                            <Text style={{marginLeft:14,color:"#555555",fontSize:14,}}>账户余额</Text>
                            <View style={{flex:1}}/>
                            <Text style={{marginRight:14,color:"#111111",fontSize:20,}}>199币</Text>
                        </View>
                        <Text style={{marginLeft:12,marginTop:20,color:'#333333',fontSize:14}}>请选择充值金额</Text>
                        <View style={{width:width-24,height:1,backgroundColor:'rgba(0,0,0,0.1)',marginLeft:12,marginTop:20}}/>
                        <View style={{marginTop:20}}>
                            <MineIAPTabBar activeTab={this.state.top_index} tabNames={this.state.tabs} tabs={this.state.tabs} goToPage={(i)=>{
                                this.setState({top_index:i})
                            }}/>
                        </View>
                        <TouchableOpacity onPress={()=>{this.goToIap()}} style={{marginLeft:12,marginBottom:40,marginTop:20,backgroundColor:'#DB3843',borderRadius:3,width:width-24,height:42,justifyContent:'center',alignItems:'center'}}>
                            <Text style={{color:'white',fontSize:14}}>立即付款:{this.state.tabs[this.state.top_index]}</Text>
                        </TouchableOpacity>
                    </View>
                    <Text style={{marginTop:15,color:'#999999',fontSize:12,marginLeft:12,width:width-24}}>1 余额功能尽可在苹果设备菁课在线APP中使用，不可以用于安卓和网页等平台；</Text>
                    <Text style={{marginTop:10,color:'#999999',fontSize:12,marginLeft:12,width:width-24}}>2 充值成功后无法退款，不可提现，请谅解；</Text>
                    <Text style={{marginTop:10,color:'#999999',fontSize:12,marginLeft:12,width:width-24}}>3 若充值后余额没有即时到账，请完全退出菁课在线APP后重新启动查看；</Text>
                    <Text style={{marginTop:10,color:'#999999',fontSize:12,marginLeft:12,width:width-24}}>4 若遇到其他充值问题，请联系客服</Text>
                </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5F5F5',
    },

});




